<template>
	<view class="container">
		<view class="header">
			<text class="title">周边领取</text>
			<text class="subtitle">兑换精美周边礼品</text>
		</view>
		
		<view class="points-info">
			<view class="points-card">
				<text class="points-label">我的积分</text>
				<text class="points-value">{{ userPoints }}</text>
			</view>
		</view>
		
		<view class="peripheral-categories">
			<view 
				class="category-item" 
				v-for="(category, index) in categories" 
				:key="index"
				:class="{ active: currentCategory === category.id }"
				@click="switchCategory(category.id)"
			>
				{{ category.name }}
			</view>
		</view>
		
		<view class="peripheral-list">
			<view class="peripheral-item" v-for="(item, index) in currentPeripherals" :key="index">
				<view class="item-image">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="item-info">
					<text class="item-name">{{ item.name }}</text>
					<text class="item-desc">{{ item.description }}</text>
					<text class="item-points">{{ item.points }}积分</text>
				</view>
				<view class="item-actions">
					<button 
						class="exchange-btn" 
						:class="{ disabled: userPoints < item.points }"
						@click="exchangeItem(item)"
						:disabled="userPoints < item.points"
					>
						{{ userPoints >= item.points ? '立即兑换' : '积分不足' }}
					</button>
				</view>
			</view>
		</view>
		
		<view class="exchange-history">
			<text class="section-title">兑换记录</text>
			<view class="history-list">
				<view class="history-item" v-for="(record, index) in exchangeHistory" :key="index">
					<view class="history-info">
						<text class="history-name">{{ record.name }}</text>
						<text class="history-date">{{ record.date }}</text>
					</view>
					<view class="history-status" :class="record.status">
						{{ getStatusText(record.status) }}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 设计图参考 -->
		<view class="design-reference">
			<text class="reference-title">设计参考图</text>
			<image class="design-image" :src="getImageUrl('体彩小程序文件夹(_F)/JPG/1021-09.jpg')" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
import { getImageUrl } from '@/api/config'

export default {
	data() {
		return {
			userPoints: 1250,
			currentCategory: 'all',
			categories: [
				{ id: 'all', name: '全部' },
				{ id: 'clothing', name: '服装' },
				{ id: 'accessories', name: '配饰' },
				{ id: 'sports', name: '运动' },
				{ id: 'digital', name: '数码' }
			],
			allPeripherals: [
				{
					id: 1,
					name: '体彩运动T恤',
					description: '100%纯棉，舒适透气',
					image: getImageUrl('tshirt.jpg'),
					points: 500,
					category: 'clothing'
				},
				{
					id: 2,
					name: '体彩运动帽',
					description: '防晒遮阳，时尚百搭',
					image: getImageUrl('hat.jpg'),
					points: 300,
					category: 'accessories'
				},
				{
					id: 3,
					name: '体彩运动水杯',
					description: '不锈钢材质，保温保冷',
					image: getImageUrl('cup.jpg'),
					points: 200,
					category: 'sports'
				},
				{
					id: 4,
					name: '体彩蓝牙耳机',
					description: '无线连接，音质清晰',
					image: getImageUrl('earphone.jpg'),
					points: 800,
					category: 'digital'
				}
			],
			exchangeHistory: [
				{
					name: '体彩运动帽',
					date: '2024-10-25',
					status: 'shipped'
				},
				{
					name: '体彩运动水杯',
					date: '2024-10-20',
					status: 'delivered'
				}
			]
		}
	},
	computed: {
		currentPeripherals() {
			if (this.currentCategory === 'all') {
				return this.allPeripherals
			}
			return this.allPeripherals.filter(item => item.category === this.currentCategory)
		}
	},
	methods: {
		getImageUrl,
		switchCategory(categoryId) {
			this.currentCategory = categoryId
		},
		exchangeItem(item) {
			if (this.userPoints < item.points) return
			
			uni.showModal({
				title: '确认兑换',
				content: `确定要用${item.points}积分兑换${item.name}吗？`,
				success: (res) => {
					if (res.confirm) {
						this.userPoints -= item.points
						this.exchangeHistory.unshift({
							name: item.name,
							date: new Date().toISOString().split('T')[0],
							status: 'pending'
						})
						uni.showToast({
							title: '兑换成功',
							icon: 'success'
						})
					}
				}
			})
		},
		getStatusText(status) {
			const statusMap = {
				pending: '待发货',
				shipped: '已发货',
				delivered: '已送达'
			}
			return statusMap[status] || ''
		}
	}
}
</script>

<style scoped>
.container {
	background-color: #f8f8f8;
	min-height: 100vh;
}

.header {
	text-align: center;
	padding: 30rpx 20rpx;
	background: white;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: 28rpx;
	color: #666;
}

.points-info {
	padding: 20rpx;
}

.points-card {
	background: linear-gradient(135deg, #4A90E2, #357ABD);
	border-radius: 20rpx;
	padding: 40rpx;
	text-align: center;
	color: white;
}

.points-label {
	font-size: 28rpx;
	display: block;
	margin-bottom: 10rpx;
	opacity: 0.9;
}

.points-value {
	font-size: 48rpx;
	font-weight: bold;
	display: block;
}

.peripheral-categories {
	display: flex;
	background: white;
	margin: 20rpx;
	border-radius: 20rpx;
	overflow: hidden;
}

.category-item {
	flex: 1;
	text-align: center;
	padding: 30rpx;
	font-size: 28rpx;
	color: #666;
	background: #f9f9f9;
}

.category-item.active {
	background: #4A90E2;
	color: white;
}

.peripheral-list {
	padding: 20rpx;
}

.peripheral-item {
	display: flex;
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	align-items: center;
}

.item-image {
	width: 120rpx;
	height: 120rpx;
	margin-right: 20rpx;
}

.item-image image {
	width: 100%;
	height: 100%;
	border-radius: 15rpx;
}

.item-info {
	flex: 1;
}

.item-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 5rpx;
}

.item-desc {
	font-size: 24rpx;
	color: #666;
	display: block;
	margin-bottom: 5rpx;
}

.item-points {
	font-size: 24rpx;
	color: #4A90E2;
	font-weight: bold;
}

.item-actions {
	margin-left: 20rpx;
}

.exchange-btn {
	width: 120rpx;
	height: 60rpx;
	background: #4A90E2;
	color: white;
	border: none;
	border-radius: 30rpx;
	font-size: 24rpx;
}

.exchange-btn.disabled {
	background: #ccc;
	color: #999;
}

.exchange-history {
	background: white;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.history-list {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.history-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	background: #f9f9f9;
	border-radius: 15rpx;
}

.history-info {
	flex: 1;
}

.history-name {
	font-size: 28rpx;
	color: #333;
	display: block;
	margin-bottom: 5rpx;
}

.history-date {
	font-size: 24rpx;
	color: #666;
}

.history-status {
	padding: 5rpx 15rpx;
	border-radius: 15rpx;
	font-size: 22rpx;
	color: white;
}

.history-status.pending {
	background: #ffa500;
}

.history-status.shipped {
	background: #4A90E2;
}

.history-status.delivered {
	background: #28a745;
}

.design-reference {
	background: rgba(255,255,255,0.9);
	border-radius: 20rpx;
	padding: 30rpx;
	margin: 20rpx;
	box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.1);
}

.reference-title {
	display: block;
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
	text-align: center;
	margin-bottom: 20rpx;
}

.design-image {
	width: 100%;
	max-height: 400rpx;
	border-radius: 10rpx;
}
</style>
